<template>
  <div class="personal">
    <div class="baseinfo">
      <img :src="headimg" alt="" />
      <div class="info">
        <h4>个人博客</h4>
        <p>web develop</p>
      </div>
      <div class="contact">
        <a
          class="gitee"
          href="https://gitee.com/gandalao/blog"
          target="_block"
        ></a>
        <a href="#" class="iconfont icon-twitter"></a>
        <a
          href="https://weibo.com/"
          class="iconfont icon-tubiaozhizuo-"
          target="_block"
        ></a>
        <a href="#" class="iconfont icon-weixin"></a>
        <a href="#" class="iconfont icon-QQ"></a>
      </div>
      <div class="download">
        <a href="#">Download CV</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "personal",
  data() {
    return {
      headimg: require("@/assets/logo.png"),
    };
  },
};
</script>

<style lang="less" scoped>
.personal {
  width: 100%;
  height: 220px;
  box-shadow: 0 0 4px #ddd;
  margin-bottom: 15px;
  .baseinfo {
    padding-top: 20px;
    background-color: #bfe2e6;
    text-align: center;
    img {
      width: 60px;
      height: 60px;
      border: 2px solid #fff;
      border-radius: 50%;
      vertical-align: middle;
    }
    .info {
      display: inline-block;
      margin-left: 15px;
      text-align: center;
      vertical-align: middle;
      h4 {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 5px;
      }
      p {
        font-size: 14px;
        margin-top: 2px;
        color: #555;
        letter-spacing: 2px;
      }
    }
    .contact {
      display: flex;
      padding: 15px 0;
      justify-content: space-around;
      a {
        font-size: 20px;
        color: #4d4c4c;
        &.gitee {
          width: 20px;
          height: 20px;
          // margin-top: 2px;
          background: url("../../../assets/svg/gitee.svg") no-repeat center/cover;
        }
      }
    }
    .download {
      width: 100%;
      padding: 20px 0;
      background-color: #fff;
      a {
        display: block;
        width: 60%;
        height: 40px;
        border-radius: 30px;
        margin: 0 auto;
        background-color: rgb(191, 226, 230);
        line-height: 40px;
        color: #000;
        font-family: "Quicksand";
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
</style>